<!--demo4-1
<script setup></script>

<template>
  <div>
    <count-com></count-com>
    <count-com/>
  </div>
  <h1>You did it!</h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>
</template>
<script>
</script>
<style scoped>
</style>-->

<!--demo4-2
<template>
  <div>
    <NumberCom/>
    <NumberCom/>
  </div>
</template>

<script>
// 导入局部组件对象
import NumberCom from "./components/NumberCom.vue"
export default {//导出当前文件夹组件，供外部文件使用
    components: {
      NumberCom
    }
};
</script>

<style scoped>

</style>-->


<!--demo4-3
<template>
  <div>
    <HelloCom name="Jim"></HelloCom>
    <HelloCom name="Lily"></HelloCom>
    <HelloCom name="Bob"></HelloCom>
  </div>
</template>
<script>
import HelloCom from"./components/HelloCom.vue";
export default{
  //注册组件
  components:{
    HelloCom,
  },
};
</script>
<style scoped>
</style>-->


<!-- demo4-4
<template>
  <div>
    <input type="radio" v-model="activeComponent" value="ActiveCom1"/>ActiveCom1
    <input type="radio" v-model="activeComponent" value="ActiveCom2"/>ActiveCom2
    <component :is="activeComponent"></component>
  </div>
</template>
<script>
import ActiveCom1 from './components/ActiveCom1.vue';
import ActiveCom2 from './components/ActiveCom2.vue';
export default {
  data() {
    return {
      activeComponent:"ActiveCom2",
    };
  },
  //注册组件
  components: {
    ActiveCom1,
    ActiveCom2,
  }
};
</script>
<style scoped>
</style> -->



<!-- demo4-5
<template>
  <div>
    <button @click="currentTab ='Tab1'">音乐</button>
    <button @click="currentTab ='Tab2'">视频</button>
    <button @click="currentTab ='Tab3'">新闻</button>
    <keep-alive>
     <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>
<script>
import Tab1 from"./components/TabCom1.vue";
import Tab2 from"./components/TabCom2.vue";
import Tab3 from"./components/TabCom3.vue";
export default{
  data(){
    return{
      currentTab: "Tab1",
    };
  },
  components:{
    Tab1,
    Tab2,
    Tab3,
  },
};
</script>
<style scoped>
</style> -->


<!-- demo4-6
<template>
  <div>
    <ChildCom ref="childRef"></ChildCom>
    <button @click="sendMessage">Send Message To Child</button>
  </div>
</template>
<script>
import ChildCom from'./components/ChildCom.vue';
export default {
  components: {
    ChildCom
  },
  methods: {
    sendMessage() {
      this. $refs.childRef.receiveMessage('Hello from parent');
    }
  }
};
</script> -->


<template >
  <div>
    <ChildCom></ChildCom>
  </div>
</template>
<script>
import ChildCom from "./components/ChildCom8.vue";
export default {
  components:{
    ChildCom
  },
  provide:{
    message:'Hello from parent'
  }
};
</script>
<style >
  
</style>